<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class=" modal-ctrl-body " v-show="s_modalShow" @click.self="anyClick">
      <div class="modal-ctrl-main even-row-ctrl" style="width: 842px;">
        <div class="dialog-box">
          <div class="modal-title">
            <slot name="dialogHeader"></slot>
          </div>
          <div class="modal-ctrl-content"  >
            <slot name="dialogBody" ></slot>
          </div>
          <div class="btns text-r">
            <button type="button"
                    class="btn btn-default "
                    @click="anyClick" >
              取消
            </button>
            <button type="button"
                    class="btn btn-info "
                    :disabled="isDisable"
                    @click="btnConfirm" >
              确认
            </button>
          </div>
        </div>
      </div>

    </div>
  </transition>

</template>

<script>

export default {
  name: 'vdialog',
  props: {
    dialogToggle: Boolean,
  },
  data(){
    return {
      s_modalShow: false,
      isDisable: false
    }
  },
  created() {
  },
  methods: {
    anyClick() {
      /**
       * 点击非输入部分，隐藏弹框，清楚数据
       */
      this.s_modalShow = !this.s_modalShow;
    },
    btnConfirm() {
      this.isDisable = true
      setTimeout(() => {
        this.isDisable = false
      },200)
      this.$emit('btnConfirm')
    },
  },
  watch:{
    dialogToggle: function() {
      /**
       * 当父组件的状态值改变的时候
       */
      this.anyClick()
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  top: -44px;
  left: -46px;
  width: calc(100% + 88px);
  height: calc(100% + 44px);
  min-width: 844px;
  min-height: 356px;
  margin-left: 10%;
  text-align: center;
  overflow: hidden;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0);
  .dialog-box {
    position: relative;
    overflow: hidden;
    margin-top: 10%;
    padding: 0 8px 84px 8px;
    display: inline-block;
    width: 62%;
    height: 56%;
    min-width: 988px;
    min-height: 460px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    background-color: #ffffff;
    .dialog-header {
      text-align: left;
      margin-left: 14px;
    }
    .dialog-body {
      width: 100%;
      height: 100%;
      // overflow: auto;
      padding-bottom: 8px;
    }
    .slot-footer-btn {
      text-align: right;
      .btn-slot-dialog {
        width: 80px;
        height: 32px;
        padding: 0 10px;
        font-size: 16px;
        margin-right: 10px;
      }
    }
  }
}
</style>
